<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-row>
        <el-col :span="21">
          <i class="el-icon-search"></i>
          <span class="search-title">筛选搜索</span>
        </el-col>
        <el-col :span="3" style="display: flex;justify-content: end">
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
      <el-form :model="body" ref="queryForm" :inline="true" size="small" label-width="140px">
        <el-form-item label="类型:" prop="type">
          <el-select v-model="body.type" placeholder="请选择">
            <el-option v-for="item in typeOption" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态:" prop="isEnabled">
          <el-select v-model="body.isEnabled" placeholder="请选择">
            <el-option v-for="item in isEnabledOption" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div style="display: flex;justify-content: space-between;align-items: center;">
        <div>
          <i class="el-icon-tickets"></i>
          <span style="padding-left: 6px;">数据列表</span>
        </div>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addQuery">新增</el-button>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="序号" v-slot="{ $index }" fixed="left" align="center">
        {{ getSerialNumber($index) }}
      </el-table-column>
      <el-table-column property="type" label="类型" align="center">
      </el-table-column>
      <el-table-column property="isEnabled" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isEnabled" :active-value="1" :inactive-value="2"
            @change="handleSwitchChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column property="imagePath" label="图片" align="center">
        <template #default="scope">
          <img :src="scope.row.imagePath" alt="Image" :style="{
            width: scope.row.type === 'ico' ? '60px' : '100px',
            height: '60px'
          }" />
        </template>
      </el-table-column>
      <el-table-column property=" jumpUrl" label="跳转路径" align="center"></el-table-column>
      <el-table-column property="description" label="描述信息" align="center">
      </el-table-column>
      <el-table-column property="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pagination v-show="true" @pagination="handlePagination" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" />
    <!-- 新增弹框 -->
    <banners-dialog v-if="addDialogVisible" title="新增banner图" :dialogVisible="addDialogVisible"
      @close="handleDialogClose"></banners-dialog>
    <!-- 修改弹框 -->
    <banners-dialog v-if="updateDialogVisible" title="修改banner图" :dialogVisible="updateDialogVisible"
      :bannerInfo="bannerInfo" @close="handleDialogClose"></banners-dialog>
  </div>
</template>
<script>
import BannersDialog from "@/components/BannersDialog/index"
import { getBannersListApi, deleteBannersApi } from "@/api/banners/bannerslist"
import { getBannersType } from "@/utils/transform/transform"
import { calcMixin } from "@/utils/mixins/calcMixin"

export default {
  name: "BannersList",
  components: { BannersDialog },
  mixins: [calcMixin],
  data() {
    return {
      typeOption: [
        {
          id: 1,
          value: "banner"
        },
        {
          id: 2,
          value: "ico"
        }
      ],
      isEnabledOption: [
        {
          id: 1,
          value: "启用"
        },
        {
          id: 2,
          value: "禁用"
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      body: {
        type: null,
        isEnabled: null
      },
      tableData: [],
      total: 0,
      addDialogVisible: false,
      updateDialogVisible: false,
      bannerInfo: {}
    }
  },
  methods: {
    // 获取banners列表
    async getBannersList() {
      const res = await getBannersListApi(this.queryParams, this.requestBody)
      if (res.code === 200) {
        this.tableData = getBannersType(res.rows)
        this.total = res.total
      }
      console.log(res)
    },
    // 切换分页操作
    handlePagination({ page, limit }) {
      this.queryParams = {
        ...this.queryParams,
        pageNum: page,
        pageSize: limit
      }
      this.getBannersList()
    },
    // 切换状态
    handleSwitchChange(row) {
      console.log('切换状态:', row.isEnabled);
      // 处理状态变更后的逻辑
    },
    // 查询按钮操作
    handleQuery() {
      this.getBannersList()
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.getBannersList()
    },
    // 新增按钮操作
    addQuery() {
      this.addDialogVisible = true
    },
    // 删除
    async deleteBanners(id) {
      const query = { id }
      const res = await deleteBannersApi(query)
      if (res.code === 200) {
        this.$message.success('删除成功')
        this.getBannersList()
      } else {
        this.$message.error('删除失败')
      }
    },
    // 删除按钮操作
    handleDelete(row) {
      this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteBanners(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 修改操作
    handleEdit(row) {
      this.bannerInfo = row
      if (this.bannerInfo) {
        this.updateDialogVisible = true
      }
    },
    handleDialogClose(data) {
      Object.assign(this, {
        addDialogVisible: data,
        updateDialogVisible: data
      })
      this.getBannersList()
    }
  },
  mounted() {
    // 获取banners列表
    this.getBannersList()
  },
}
</script>
<style lang="scss" scoped></style>